<!--
 * @Author: your name
 * @Date: 2021-08-04 14:30:50
 * @LastEditTime: 2021-08-09 17:11:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \niushop\src\views\Login\index.vue
-->
<template>
  <div class="box">
    <header>登陆优选商城</header>
    <van-field v-model="username" label="用户名" placeholder="请输入您的用户名（例：liyong）"/>
    <van-field v-model="password" type="password" label="密码" placeholder="请输入您的密码" />
    <div class="btns">
      <van-button plain hairline @click="reg">注册</van-button>
      <van-button plain hairline class="pink" @click="login">登陆</van-button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        username:'',
        password:""
      }
    },
    methods:{
        login(){
          if(!this.username||!this.password){
             this.$toast("用户名和密码不能为空");
          }else{
              this.$http({
            method:"post",
            path:"/users/login",
            params:{
              username:this.username,
              password:this.password
            }
          }).then(res=>{
            console.log(res.data);
            if(res.data.code===1){
                
              window.sessionStorage.setItem('token',res.data.token)
              window.sessionStorage.setItem('id',res.data.user.id)
              window.sessionStorage.setItem('nickname',res.data.user.nickname)
              this.$router.push("home/wode")
               
            }else{
           this.$toast("用户名或密码不正确");
            }
          })
          }
          
        },
        reg(){
           this.$router.push("/register")
        }
    }
}
</script>

<style scoped>
    .box{
      background: #f5f5f5;
      height: 100%;
    }
    header{
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      color: hotpink;
      background: white;
      margin-bottom: 20px;
    }
    .btns{
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      margin-top: 40px;
    }
    .van-button{
      width: 40%;
      border-radius: 6px;
       background: pink;
       color: white;
    }
   
</style>